<template>
  <div class="event-list">
    <div class="div-events">
      <el-button @click="isShowEvent = true">添加事件</el-button>
      <div>
        <el-tag
          v-for="event in Object.keys(curComponent.events)"
          :key="event"
          closable
          @close="removeEvent(event)"
        >
          {{ event }}
        </el-tag>
      </div>
    </div>

    <!--选择事件-->
    <Modal v-model="isShowEvent">
      <el-tabs v-model="eventActiveName">
        <el-tab-pane
          v-for="item in eventList"
          :key="item.key"
          :label="item.label"
          :name="item.key"
          style="padding: 0 20px;"
        >
          <el-input
            v-if="item.key === 'redirect'"
            v-model="item.param"
            type="textarea"
            placeholder="请输入完整的 URL"
            @keydown.native.stop
          />
          <el-input
            v-if="item.key === 'alert'"
            v-model="item.param"
            type="textarea"
            placeholder="请输入要 alert 的内容"
            @keydown.native.stop
          />
          <el-button style="margin-top: 20px;" @click="addEvent(item.key, item.param)">确定</el-button>
        </el-tab-pane>
      </el-tabs>
    </Modal>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { useGlobalStore } from "@/store";
import { eventList } from "@/utils/events";
import Modal from "@/components/common/Modal.vue";

const globalStore = useGlobalStore();
const curComponent = globalStore.curComponent;
const isShowEvent = ref<Boolean>(false);

const eventActiveName = ref<string>("redirect")
const removeEvent = (event: string) => {
};

const addEvent = (key:string,params:string) =>{}
</script>

<style scoped>

</style>